<template>
  <div>
    <!--头部-->
    <Header @scrollTitle="scrollTitle" :chooseValue=1></Header>
    <div class="jqgk" style="background:#FFF5E0">
      <div class="contai" style="max-width:1197px;">
        <div class="top_tit">
         <span  v-if="pcshow" class="titleFont" id="headline">Brief Introduction</span>
          <span  v-if="!pcshow" class="titleFont" style="font-size:36px" id="headline">Brief Introduction</span>
         <!-- pc端 -->
          <div style="text-align:left;margin:0px" v-if="pcshow">
            <a-spin :spinning="spinning" :delay="delayTime"> 
            <div v-for="item in dataList" :key="item.key">
              <div v-for="items in item.details" :key="items.key">
                <p class="titleFontp" v-if="items.type == 1">
                  {{ items.content }}
                </p>
                <img :src="items.content" v-if="items.type == 2" />
              </div>
            </div>
            </a-spin>
          </div>
           <!-- 手机端 -->
          <div style="text-align:left;margin:0px;padding-left:20px;padding-right:20px"  v-if="!pcshow">
            <a-spin :spinning="spinning" :delay="delayTime"> 
            <div v-for="item in dataList" :key="item.key">
              <div v-for="items in item.details" :key="items.key">
                <p class="titleFontp" style="font-size:14px" v-if="items.type == 1">
                  {{ items.content }}
                </p>
                <img :src="items.content" v-if="items.type == 2" />
              </div>
            </div>
            </a-spin>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./header";
import Footer from "./footer";
import { getOutineList } from "../request/api";
export default {
  components: { Header, Footer },
  data() {
    return {
      dataList: [],
      spinning:true,
      delayTime: 500,
      pcshow: false,
    };
  },
  beforeCreate() {},
  created() {
   if (this._isMobile()) {
      this.pcshow = false;
    } else {
      this.pcshow = true;
    } 
  },

  mounted() {
    this.getOutineListFunction();
  },

  methods: {
    //PC端获取
    getOutineListFunction() {
      getOutineList(this.HOST)
        .then(response => {
          this.spinning =true
          this.dataList = response.data.map(function(currentValue) {
            currentValue.details = JSON.parse(currentValue.details);
            return currentValue;
          });
          this.spinning =false
        })
        .catch(error => {});
    },
    scrollTitle() {
      // 获取点击的按钮对应页面的id
      var PageId = document.querySelector("#headline");
      // 打印出对应页面与窗口的距离
      // 使用平滑属性，滑动到上方获取的距离
      // 下方我只设置了top，当然 你也可以加上 left 让他横向滑动
      // widow 根据浏览器滚动条，如果你是要在某个盒子里面产生滑动，记得修改
      window.scrollTo({
        top: PageId.offsetTop - 40,
        // left: PageId.offsetLeft,
        behavior: "smooth"
      });
    },
       //判断是PC端还是手机端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
  }
};
</script>

<style>
.titleFont {
  font-size: 42px;
  font-family: 'Microsoft YaHei';
  font-weight: 400;
  color: #840207;
  line-height: 36px;
}

.titleFontp {
  font-size: 18px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: #2c3030;
  line-height: 36px;
  margin: 0px;
  padding: 0px;
  text-indent: 2em;
}
</style>
